<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie ie7 lt-ie9 lt-ie8"        lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie ie8 lt-ie9"               lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="ie ie9"                      lang="en"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-ie">
<!--<![endif]-->

<head>
   <!-- Meta-->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
   <meta name="description" content="">
   <meta name="keywords" content="">
   <meta name="author" content="">
   <title>BeAdmin - Bootstrap Admin Theme</title>
   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
   <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
   <!-- Bootstrap CSS-->
   <link rel="stylesheet" href="app/css/bootstrap.css">
   <!-- Vendor CSS-->
   <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="vendor/animo/animate+animo.css">
   <link rel="stylesheet" href="vendor/csspinner/csspinner.min.css">
   <!-- START Page Custom CSS-->
   <!-- END Page Custom CSS-->
   <!-- App CSS-->
   <link rel="stylesheet" href="app/css/app.css">
   <!-- Modernizr JS Script-->
   <script src="vendor/modernizr/modernizr.js" type="application/javascript"></script>
   <!-- FastClick for mobiles-->
   <script src="vendor/fastclick/fastclick.js" type="application/javascript"></script>
</head>

<body>
   <!-- START Main wrapper-->
   <div class="wrapper">
      <!-- START Top Navbar-->
      <nav role="navigation" class="navbar navbar-default navbar-top navbar-fixed-top">
         <!-- START navbar header-->
         <div class="navbar-header">
            <a href="index.html" class="navbar-brand">
               <div class="brand-logo">
                  <img src="app/img/logo.png" alt="App Logo" class="img-responsive">
               </div>
               <div class="brand-logo-collapsed">
                  <img src="app/img/logo-single.png" alt="App Logo" class="img-responsive">
               </div>
            </a>
         </div>
         <!-- END navbar header-->
         <!-- START Nav wrapper-->
         <div class="nav-wrapper">
            <!-- START Left navbar-->
            <ul class="nav navbar-nav">
               <li>
                  <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                  <a href="table-extended.html#" data-toggle-state="aside-collapsed" class="hidden-xs">
                     <em class="fa fa-navicon"></em>
                  </a>
                  <!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
                  <a href="table-extended.html#" data-toggle-state="aside-toggled" class="visible-xs">
                     <em class="fa fa-navicon"></em>
                  </a>
               </li>
               <!-- START Messages menu (dropdown-list)-->
               <li class="dropdown dropdown-list">
                  <a href="table-extended.html#" data-toggle="dropdown" data-play="flipInX" class="dropdown-toggle">
                     <em class="fa fa-envelope"></em>
                  </a>
                  <!-- START Dropdown menu-->
                  <ul class="dropdown-menu">
                     <li class="dropdown-menu-header">Unread messages</li>
                     <li class="p-sm">
                        <input type="text" placeholder="Find contacts.." onfocus="javascript:void(0);" class="form-control">
                     </li>
                     <li>
                        <div class="scroll-viewport">
                           <!-- START list group-->
                           <div class="list-group scroll-content">
                              <!-- START list group item-->
                              <a href="table-extended.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/01.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">5m</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-success circle-md"></span>Greg Lewis</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="table-extended.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/04.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">3h</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-success circle-md"></span>Constance Cook</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="table-extended.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/03.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">3h</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-danger circle-md"></span>Cody Barnes</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="table-extended.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/05.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">4h</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-danger circle-md"></span>Gina Robinson</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                              <!-- START list group item-->
                              <a href="table-extended.html#" class="list-group-item">
                                 <div class="media">
                                    <div class="pull-left">
                                       <img src="app/img/user/06.jpg" alt="Image" class="media-object img-circle thumb32">
                                    </div>
                                    <div class="media-body clearfix">
                                       <small class="pull-right">yesterday</small>
                                       <strong class="media-heading text-primary">
                                          <span class="circle circle-danger circle-md"></span>Violet Olson</strong>
                                       <p class="mb-sm">
                                          <small>Nunc vel dui et leo sagittis fringilla.</small>
                                       </p>
                                    </div>
                                 </div>
                              </a>
                              <!-- END list group item-->
                           </div>
                           <!-- END list group-->
                        </div>
                     </li>
                     <!-- START dropdown footer-->
                     <li class="p">
                        <a href="table-extended.html#" class="text-center">
                           <small class="text-primary">More messages</small>
                        </a>
                     </li>
                     <!-- END dropdown footer-->
                  </ul>
                  <!-- END Dropdown menu-->
               </li>
               <!-- END Messages menu (dropdown-list)-->
               <!-- START User avatar toggle-->
               <li>
                  <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                  <a href="table-extended.html#" data-toggle-state="aside-user">
                     <em class="fa fa-user"></em>
                  </a>
               </li>
               <!-- END User avatar toggle-->
            </ul>
            <!-- END Left navbar-->
            <!-- START Right Navbar-->
            <ul class="nav navbar-nav navbar-right">
               <!-- Search icon-->
               <li>
                  <a href="table-extended.html#" data-toggle="navbar-search">
                     <em class="fa fa-search"></em>
                  </a>
               </li>
               <!-- Fullscreen-->
               <li>
                  <a href="table-extended.html#" data-toggle="fullscreen">
                     <em class="fa fa-expand"></em>
                  </a>
               </li>
               <!-- START Alert menu-->
               <li class="dropdown dropdown-list">
                  <a href="table-extended.html#" data-toggle="dropdown" data-play="flipInX" class="dropdown-toggle">
                     <em class="fa fa-bell"></em>
                     <div class="label label-danger">11</div>
                  </a>
                  <!-- START Dropdown menu-->
                  <ul class="dropdown-menu">
                     <li>
                        <!-- START list group-->
                        <div class="list-group">
                           <!-- list item-->
                           <a href="table-extended.html#" class="list-group-item">
                              <div class="media">
                                 <div class="pull-left">
                                    <em class="fa fa-twitter fa-2x text-info"></em>
                                 </div>
                                 <div class="media-body clearfix">
                                    <p class="m0">New followers</p>
                                    <p class="m0 text-muted">
                                       <small>1 new follower</small>
                                    </p>
                                 </div>
                              </div>
                           </a>
                           <!-- list item-->
                           <a href="table-extended.html#" class="list-group-item">
                              <div class="media">
                                 <div class="pull-left">
                                    <em class="fa fa-envelope fa-2x text-warning"></em>
                                 </div>
                                 <div class="media-body clearfix">
                                    <p class="m0">New e-mails</p>
                                    <p class="m0 text-muted">
                                       <small>You have 10 new emails</small>
                                    </p>
                                 </div>
                              </div>
                           </a>
                           <!-- list item-->
                           <a href="table-extended.html#" class="list-group-item">
                              <div class="media">
                                 <div class="pull-left">
                                    <em class="fa fa-tasks fa-2x text-success"></em>
                                 </div>
                                 <div class="media-body clearfix">
                                    <p class="m0">Pending Tasks</p>
                                    <p class="m0 text-muted">
                                       <small>11 pending task</small>
                                    </p>
                                 </div>
                              </div>
                           </a>
                           <!-- last list item -->
                           <a href="table-extended.html#" class="list-group-item">
                              <small>More notifications</small>
                              <span class="label label-danger pull-right">14</span>
                           </a>
                        </div>
                        <!-- END list group-->
                     </li>
                  </ul>
                  <!-- END Dropdown menu-->
               </li>
               <!-- END Alert menu-->
               <!-- START Contacts button-->
               <li>
                  <a href="table-extended.html#" data-toggle-state="offsidebar-open">
                     <em class="fa fa-group"></em>
                  </a>
               </li>
               <!-- END Contacts menu-->
            </ul>
            <!-- END Right Navbar-->
         </div>
         <!-- END Nav wrapper-->
         <!-- START Search form-->
         <form role="search" action="search.html" class="navbar-form">
            <div class="form-group has-feedback">
               <input type="text" placeholder="Type and hit Enter.." class="form-control">
               <div data-toggle="navbar-search-dismiss" class="fa fa-times form-control-feedback"></div>
            </div>
            <button type="submit" class="hidden btn btn-default">Submit</button>
         </form>
         <!-- END Search form-->
      </nav>
      <!-- END Top Navbar-->
      <!-- START aside-->
      <aside class="aside">
         <!-- START Sidebar (left)-->
         <nav class="sidebar">
            <!-- START user info-->
            <div class="item user-block">
               <!-- User picture-->
               <div class="user-block-picture">
                  <div class="user-block-status">
                     <img src="app/img/user/02.jpg" alt="Avatar" width="60" height="60" class="img-thumbnail img-circle">
                     <div class="circle circle-success circle-lg"></div>
                  </div>
                  <!-- Status when collapsed-->
               </div>
               <!-- Name and Role-->
               <div class="user-block-info">
                  <span class="user-block-name item-text">Welcome User</span>
                  <span class="user-block-role">UX-Dev</span>
               </div>
            </div>
            <!-- END user info-->
            <ul class="nav">
               <!-- START Menu-->
               <li class="nav-heading">Main navigation</li>
               <li>
                  <a href="index.html" title="Dashboard" data-toggle="" class="no-submenu">
                     <em class="fa fa-dot-circle-o"></em>
                     <div class="label label-primary pull-right">10</div>
                     <span class="item-text">Dashboard</span>
                  </a>
               </li>
               <li>
                  <a href="widgets.html" title="Widgets" data-toggle="" class="no-submenu">
                     <em class="fa fa-cube"></em>
                     <span class="item-text">Widgets</span>
                  </a>
               </li>
               <li>
                  <a href="table-extended.html#" title="Elements" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-flask"></em>
                     <span class="item-text">Elements</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="button.html" title="Buttons" data-toggle="" class="no-submenu">
                           <span class="item-text">Buttons</span>
                        </a>
                     </li>
                     <li>
                        <a href="notifications.html" title="Notifications" data-toggle="" class="no-submenu">
                           <span class="item-text">Notifications</span>
                        </a>
                     </li>
                     <li>
                        <a href="spinners.html" title="Spinners" data-toggle="" class="no-submenu">
                           <span class="item-text">Spinners</span>
                        </a>
                     </li>
                     <li>
                        <a href="animations.html" title="Animations" data-toggle="" class="no-submenu">
                           <span class="item-text">Animations</span>
                        </a>
                     </li>
                     <li>
                        <a href="dropdown-animations.html" title="Dropdown" data-toggle="" class="no-submenu">
                           <span class="item-text">Dropdown</span>
                        </a>
                     </li>
                     <li>
                        <a href="panels.html" title="Panels" data-toggle="" class="no-submenu">
                           <span class="item-text">Panels</span>
                        </a>
                     </li>
                     <li>
                        <a href="portlets.html" title="Portlets" data-toggle="" class="no-submenu">
                           <span class="item-text">Portlets</span>
                        </a>
                     </li>
                     <li>
                        <a href="maps.html" title="Maps" data-toggle="" class="no-submenu">
                           <span class="item-text">Maps</span>
                        </a>
                     </li>
                     <li>
                        <a href="grid.html" title="Grid" data-toggle="" class="no-submenu">
                           <span class="item-text">Grid</span>
                        </a>
                     </li>
                     <li>
                        <a href="grid-masonry.html" title="Grid Masonry" data-toggle="" class="no-submenu">
                           <span class="item-text">Grid Masonry</span>
                        </a>
                     </li>
                     <li>
                        <a href="typo.html" title="Typography" data-toggle="" class="no-submenu">
                           <span class="item-text">Typography</span>
                        </a>
                     </li>
                     <li>
                        <a href="icons.html" title="Icons" data-toggle="" class="no-submenu">
                           <div class="label label-primary pull-right">+400</div>
                           <span class="item-text">Icons</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="table-extended.html#" title="Forms" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-edit"></em>
                     <span class="item-text">Forms</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="form-standard.html" title="Standard" data-toggle="" class="no-submenu">
                           <span class="item-text">Standard</span>
                        </a>
                     </li>
                     <li>
                        <a href="form-extended.html" title="Extended" data-toggle="" class="no-submenu">
                           <span class="item-text">Extended</span>
                        </a>
                     </li>
                     <li>
                        <a href="form-validation.html" title="Validation" data-toggle="" class="no-submenu">
                           <span class="item-text">Validation</span>
                        </a>
                     </li>
                     <li>
                        <a href="form-wizard.html" title="Wizard" data-toggle="" class="no-submenu">
                           <span class="item-text">Wizard</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="table-extended.html#" title="Charts" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-bar-chart-o"></em>
                     <span class="item-text">Charts</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="chart-flot.html" title="Flot" data-toggle="" class="no-submenu">
                           <span class="item-text">Flot</span>
                        </a>
                     </li>
                     <li>
                        <a href="chart-radial.html" title="Radial" data-toggle="" class="no-submenu">
                           <span class="item-text">Radial</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li class="active">
                  <a href="table-extended.html#" title="Tables" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-table"></em>
                     <span class="item-text">Tables</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse in">
                     <li>
                        <a href="table-standard.html" title="Standard" data-toggle="" class="no-submenu">
                           <span class="item-text">Standard</span>
                        </a>
                     </li>
                     <li class="active">
                        <a href="table-extended.html" title="Extended" data-toggle="" class="no-submenu">
                           <span class="item-text">Extended</span>
                        </a>
                     </li>
                     <li>
                        <a href="table-datatable.html" title="DataTables" data-toggle="" class="no-submenu">
                           <span class="item-text">DataTables</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li class="nav-heading">More elements</li>
               <li>
                  <a href="table-extended.html#" title="Pages" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-file-text-o"></em>
                     <span class="item-text">Pages</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="pages/login.html" title="Login" data-toggle="" class="no-submenu">
                           <span class="item-text">Login</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/signup.html" title="Sign up" data-toggle="" class="no-submenu">
                           <span class="item-text">Sign up</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/recover.html" title="Recover Password" data-toggle="" class="no-submenu">
                           <span class="item-text">Recover Password</span>
                        </a>
                     </li>
                     <li>
                        <a href="pages/lock.html" title="Lock" data-toggle="" class="no-submenu">
                           <span class="item-text">Lock</span>
                        </a>
                     </li>
                     <li>
                        <a href="template.html" title="Starter Template" data-toggle="" class="no-submenu">
                           <span class="item-text">Starter Template</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <li>
                  <a href="table-extended.html#" title="Extras" data-toggle="collapse-next" class="has-submenu">
                     <em class="fa fa-plus"></em>
                     <span class="item-text">Extras</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse ">
                     <li>
                        <a href="mailbox.html" title="Mailbox" data-toggle="" class="no-submenu">
                           <span class="item-text">Mailbox</span>
                        </a>
                     </li>
                     <li>
                        <a href="timeline.html" title="Timeline" data-toggle="" class="no-submenu">
                           <span class="item-text">Timeline</span>
                        </a>
                     </li>
                     <li>
                        <a href="calendar.html" title="Calendar" data-toggle="" class="no-submenu">
                           <span class="item-text">Calendar</span>
                        </a>
                     </li>
                     <li>
                        <a href="invoice.html" title="Invoice" data-toggle="" class="no-submenu">
                           <span class="item-text">Invoice</span>
                        </a>
                     </li>
                     <li>
                        <a href="search.html" title="Search" data-toggle="" class="no-submenu">
                           <span class="item-text">Search</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <!-- START Theme color options-->
               <li>
                  <a href="table-extended.html#" title="Color options" data-toggle="collapse-next" class="has-submenu">
                     <div class="label label-purple pull-right">4</div>
                     <em class="fa fa-tint"></em>
                     <span class="item-text">Colors</span>
                  </a>
                  <!-- START SubMenu item-->
                  <ul class="nav collapse">
                     <li>
                        <a href="table-extended.html#" title="Option 1" data-toggle="load-css" data-uri="app/css/beadmin-theme-a.css" class="no-submenu">
                           <span class="item-text">Alternative 1</span>
                        </a>
                     </li>
                     <li>
                        <a href="table-extended.html#" title="Option 2" data-toggle="load-css" data-uri="app/css/beadmin-theme-b.css" class="no-submenu">
                           <span class="item-text">Alternative 2</span>
                        </a>
                     </li>
                     <li>
                        <a href="table-extended.html#" title="Option 3" data-toggle="load-css" data-uri="app/css/beadmin-theme-c.css" class="no-submenu">
                           <span class="item-text">Alternative 3</span>
                        </a>
                     </li>
                     <li>
                        <a href="table-extended.html#" title="Option 4" data-toggle="load-css" data-uri="app/css/beadmin-theme-d.css" class="no-submenu">
                           <span class="item-text">Alternative 4</span>
                        </a>
                     </li>
                  </ul>
                  <!-- END SubMenu item-->
               </li>
               <!-- END Theme color options-->
               <li>
                  <ul class="nav-labels">
                     <li class="nav-heading">Categories</li>
                     <li class="nav-labels-item">
                        <span class="circle circle-lg circle-success"></span><a href="table-extended.html#">Green</a>
                     </li>
                     <li class="nav-labels-item">
                        <span class="circle circle-lg circle-danger"></span><a href="table-extended.html#">Red</a>
                     </li>
                     <li class="nav-labels-item">
                        <span class="circle circle-lg circle-info"></span><a href="table-extended.html#">Skyblue</a>
                     </li>
                     <li class="nav-labels-item">
                        <span class="circle circle-lg circle-warning"></span><a href="table-extended.html#">Yellow</a>
                     </li>
                  </ul>
               </li>
               <!-- END Menu-->
            </ul>
         </nav>
         <!-- END Sidebar (left)-->
      </aside>
      <!-- End aside-->
      <!-- START aside-->
      <aside class="offsidebar">
         <!-- START Off Sidebar (right)-->
         <nav>
            <div class="p-lg text-center">
               <em class="fa fa-user"></em>
               <strong>Connections</strong>
            </div>
            <ul class="nav">
               <!-- END user info-->
               <li class="p">
                  <div class="form-group has-feedback">
                     <input type="text" placeholder="Search contacts.." class="form-control input-sm">
                     <em class="fa fa-search form-control-feedback text-muted"></em>
                  </div>
               </li>
               <!-- START list title-->
               <li class="p">
                  <small class="text-muted">ONLINE</small>
               </li>
               <!-- END list title-->
               <li>
                  <!-- START User status-->
                  <a href="table-extended.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-success circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/05.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Laura Sam</strong>
                           <br>
                           <small class="text-muted">Lead, Developer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="table-extended.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-success circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/06.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Beverley Pierce</strong>
                           <br>
                           <small class="text-muted">Writer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="table-extended.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-danger circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/07.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Mika Long</strong>
                           <br>
                           <small class="text-muted">System Analyst</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="table-extended.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-warning circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/08.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Danielle Berry</strong>
                           <br>
                           <small class="text-muted">Developer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
               </li>
               <!-- START list title-->
               <li class="p">
                  <small class="text-muted">OFFLINE</small>
               </li>
               <!-- END list title-->
               <li>
                  <!-- START User status-->
                  <a href="table-extended.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/09.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Martin Cooper</strong>
                           <br>
                           <small class="text-muted">Designeer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
                  <!-- START User status-->
                  <a href="table-extended.html#" class="media p mt0">
                     <span class="pull-right">
                        <span class="circle circle-lg"></span>
                     </span>
                     <span class="pull-left">
                        <!-- Contact avatar-->
                        <img src="app/img/user/10.jpg" alt="Image" class="media-object img-circle thumb32">
                     </span>
                     <!-- Contact info-->
                     <span class="media-body">
                        <span class="media-heading">
                           <strong>Daniel Curtis</strong>
                           <br>
                           <small class="text-muted">Designer</small>
                        </span>
                     </span>
                  </a>
                  <!-- END User status-->
               </li>
               <li>
                  <div class="p-lg text-center">
                     <!-- Optional link to list more users-->
                     <a href="table-extended.html#" title="See more contacts" class="btn btn-purple btn-sm">
                        <strong>Load more..</strong>
                     </a>
                  </div>
               </li>
            </ul>
            <!-- Extra items-->
            <div class="p">
               <p>
                  <small class="text-muted">Tasks completion</small>
               </p>
               <div class="progress progress-xs m0">
                  <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-success progress-80">
                     <span class="sr-only">80% Complete</span>
                  </div>
               </div>
            </div>
            <div class="p">
               <p>
                  <small class="text-muted">Upload quota</small>
               </p>
               <div class="progress progress-xs m0">
                  <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-warning progress-40">
                     <span class="sr-only">40% Complete</span>
                  </div>
               </div>
            </div>
         </nav>
         <!-- END Off Sidebar (right)-->
      </aside>
      <!-- END aside-->
      <!-- START Main section-->
      <section>
         <!-- START Page content-->
         <div class="content-wrapper">
            <h3>Tables
               <small>A showcase of different components inside tables</small>
            </h3>
            <!-- START panel-->
            <div class="panel panel-default">
               <div class="panel-heading">Demo Table #1
                  <a href="table-extended.html#" data-perform="panel-dismiss" data-toggle="tooltip" title="Close Panel" class="pull-right">
                     <em class="fa fa-times"></em>
                  </a>
                  <a href="table-extended.html#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                     <em class="fa fa-minus"></em>
                  </a>
               </div>
               <!-- START table-responsive-->
               <div class="table-responsive">
                  <table id="table-ext-1" class="table table-bordered table-hover">
                     <thead>
                        <tr>
                           <th>UID</th>
                           <th>Picture</th>
                           <th>Username</th>
                           <th>First Name</th>
                           <th>Last Name</th>
                           <th>Email</th>
                           <th>Profile</th>
                           <th>Last Login</th>
                           <th class="check-all">
                              <div data-toggle="tooltip" data-title="Check All" class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr>
                           <td>1</td>
                           <td>
                              <div class="media">
                                 <img src="app/img/user/01.jpg" alt="Image" class="img-responsive img-circle">
                              </div>
                           </td>
                           <td>@twitter</td>
                           <td>Larry</td>
                           <td>the Bird</td>
                           <td>mail@example.com</td>
                           <td class="text-center">
                              <div data-label="25%" class="radial-bar radial-bar-25 radial-bar-xs"></div>
                           </td>
                           <td>1 week</td>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>2</td>
                           <td>
                              <div class="media">
                                 <img src="app/img/user/02.jpg" alt="Image" class="img-responsive img-circle">
                              </div>
                           </td>
                           <td>@mdo</td>
                           <td>Mark</td>
                           <td>Otto</td>
                           <td>mail@example.com</td>
                           <td class="text-center">
                              <div data-label="50%" class="radial-bar radial-bar-50 radial-bar-xs"></div>
                           </td>
                           <td>25 minutes</td>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                        </tr>
                        <tr>
                           <td>3</td>
                           <td>
                              <div class="media">
                                 <img src="app/img/user/03.jpg" alt="Image" class="img-responsive img-circle">
                              </div>
                           </td>
                           <td>@fat</td>
                           <td>Jacob</td>
                           <td>Thornton</td>
                           <td>mail@example.com</td>
                           <td class="text-center">
                              <div data-label="80%" class="radial-bar radial-bar-80 radial-bar-xs"></div>
                           </td>
                           <td>10 hours</td>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <!-- END table-responsive-->
               <div class="panel-footer">
                  <div class="row">
                     <div class="col-lg-2">
                        <div class="input-group">
                           <input type="text" placeholder="Search" class="input-sm form-control">
                           <span class="input-group-btn">
                              <button type="button" class="btn btn-sm btn-default">Search</button>
                           </span>
                        </div>
                     </div>
                     <div class="col-lg-8"></div>
                     <div class="col-lg-2">
                        <div class="input-group pull-right">
                           <select class="input-sm form-control">
                              <option value="0">Bulk action</option>
                              <option value="1">Delete</option>
                              <option value="2">Clone</option>
                              <option value="3">Export</option>
                           </select>
                           <span class="input-group-btn">
                              <button class="btn btn-sm btn-default">Apply</button>
                           </span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- END panel-->
            <!-- START panel-->
            <div class="panel panel-default">
               <div class="panel-heading">Demo Table #2
                  <a href="table-extended.html#" data-perform="panel-dismiss" data-toggle="tooltip" title="Close Panel" class="pull-right">
                     <em class="fa fa-times"></em>
                  </a>
                  <a href="table-extended.html#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                     <em class="fa fa-minus"></em>
                  </a>
               </div>
               <!-- START table-responsive-->
               <div class="table-responsive">
                  <table id="table-ext-2" class="table table-striped table-bordered table-hover">
                     <thead>
                        <tr>
                           <th class="check-all">
                              <div data-toggle="tooltip" data-title="Check All" class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </th>
                           <th>Description</th>
                           <th>Active</th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                           <td>
                              <div class="media">
                                 <a href="table-extended.html#" class="pull-left">
                                    <img src="app/img/user/01.jpg" alt="" class="media-object img-responsive img-circle">
                                 </a>
                                 <div class="media-body">
                                    <div class="pull-right badge baed-info">admin</div>
                                    <h4 class="media-heading">Holly Wallace</h4>
                                    <p>Username: holly123</p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
                                    nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
                              </div>
                           </td>
                           <td class="text-center">
                              <label class="switch">
                                 <input type="checkbox">
                                 <span></span>
                              </label>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                           <td>
                              <div class="media">
                                 <a href="table-extended.html#" class="pull-left">
                                    <img src="app/img/user/03.jpg" alt="" class="media-object img-responsive img-circle">
                                 </a>
                                 <div class="media-body">
                                    <div class="pull-right badge baed-info">writer</div>
                                    <h4 class="media-heading">Alexis Foster</h4>
                                    <p>Username: ali89</p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                                    vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
                              </div>
                           </td>
                           <td class="text-center">
                              <label class="switch">
                                 <input type="checkbox" checked>
                                 <span></span>
                              </label>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="checkbox c-checkbox">
                                 <label>
                                    <input type="checkbox">
                                    <span class="fa fa-check"></span>
                                 </label>
                              </div>
                           </td>
                           <td>
                              <div class="media">
                                 <a href="table-extended.html#" class="pull-left">
                                    <img src="app/img/user/05.jpg" alt="" class="media-object img-responsive img-circle">
                                 </a>
                                 <div class="media-body">
                                    <div class="pull-right badge baed-info">editor</div>
                                    <h4 class="media-heading">Mario Miles</h4>
                                    <p>Username: mariomiles</p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                                    ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</div>
                              </div>
                           </td>
                           <td class="text-center">
                              <label class="switch">
                                 <input type="checkbox" checked>
                                 <span></span>
                              </label>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
               <!-- END table-responsive-->
               <div class="panel-footer">
                  <div class="row">
                     <div class="col-lg-2">
                        <div class="input-group pull-right">
                           <select class="input-sm form-control">
                              <option value="0">Bulk action</option>
                              <option value="1">Delete</option>
                              <option value="2">Clone</option>
                              <option value="3">Export</option>
                           </select>
                           <span class="input-group-btn">
                              <button class="btn btn-sm btn-default">Apply</button>
                           </span>
                        </div>
                     </div>
                     <div class="col-lg-8"></div>
                     <div class="col-lg-2 text-right">
                        <ul class="pagination pagination-sm">
                           <li class="active"><a href="table-extended.html#">1</a>
                           </li>
                           <li><a href="table-extended.html#">2</a>
                           </li>
                           <li><a href="table-extended.html#">3</a>
                           </li>
                           <li><a href="table-extended.html#">»</a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            <!-- END panel-->
            <!-- START row-->
            <div class="row">
               <div class="col-lg-6">
                  <!-- START panel-->
                  <div class="panel panel-default">
                     <div class="panel-heading">Demo Table #3
                        <a href="table-extended.html#" data-perform="panel-dismiss" data-toggle="tooltip" title="Close Panel" class="pull-right">
                           <em class="fa fa-times"></em>
                        </a>
                        <a href="table-extended.html#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                           <em class="fa fa-minus"></em>
                        </a>
                     </div>
                     <!-- START table-responsive-->
                     <div class="table-responsive">
                        <table id="table-ext-3" class="table table-striped table-bordered table-hover">
                           <thead>
                              <tr>
                                 <th>Task name</th>
                                 <th>Progress</th>
                                 <th>Deadline</th>
                                 <th>Action</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td>Nunc luctus, quam non condimentum ornare</td>
                                 <td>
                                    <div class="progress progress-striped progress-xs">
                                       <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-success progress-80">
                                          <span class="sr-only">80% Complete</span>
                                       </div>
                                    </div>
                                 </td>
                                 <td>05/05/2014</td>
                                 <td class="text-center">
                                    <div class="btn-group"><a href="table-extended.html#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cog"></i></a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="table-extended.html#">Action</a>
                                          </li>
                                          <li><a href="table-extended.html#">Another action</a>
                                          </li>
                                          <li><a href="table-extended.html#">Something else here</a>
                                          </li>
                                          <li class="divider"></li>
                                          <li><a href="table-extended.html#">Separated link</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>Integer in convallis felis.</td>
                                 <td>
                                    <div class="progress progress-striped progress-xs">
                                       <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-danger progress-20">
                                          <span class="sr-only">20% Complete</span>
                                       </div>
                                    </div>
                                 </td>
                                 <td>15/05/2014</td>
                                 <td class="text-center">
                                    <div class="btn-group"><a href="table-extended.html#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cog"></i></a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="table-extended.html#">Action</a>
                                          </li>
                                          <li><a href="table-extended.html#">Another action</a>
                                          </li>
                                          <li><a href="table-extended.html#">Something else here</a>
                                          </li>
                                          <li class="divider"></li>
                                          <li><a href="table-extended.html#">Separated link</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>Nullam sit amet magna vestibulum libero dapibus iaculis.</td>
                                 <td>
                                    <div class="progress progress-striped progress-xs">
                                       <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-info progress-50">
                                          <span class="sr-only">50% Complete</span>
                                       </div>
                                    </div>
                                 </td>
                                 <td>05/10/2014</td>
                                 <td class="text-center">
                                    <div class="btn-group"><a href="table-extended.html#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cog"></i></a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="table-extended.html#">Action</a>
                                          </li>
                                          <li><a href="table-extended.html#">Another action</a>
                                          </li>
                                          <li><a href="table-extended.html#">Something else here</a>
                                          </li>
                                          <li class="divider"></li>
                                          <li><a href="table-extended.html#">Separated link</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                     <!-- END table-responsive-->
                  </div>
                  <!-- END panel-->
               </div>
               <div class="col-lg-6">
                  <!-- START panel-->
                  <div class="panel panel-default">
                     <div class="panel-heading">Demo Table #4
                        <a href="table-extended.html#" data-perform="panel-dismiss" data-toggle="tooltip" title="Close Panel" class="pull-right">
                           <em class="fa fa-times"></em>
                        </a>
                        <a href="table-extended.html#" data-perform="panel-collapse" data-toggle="tooltip" title="Collapse Panel" class="pull-right">
                           <em class="fa fa-minus"></em>
                        </a>
                     </div>
                     <!-- START table-responsive-->
                     <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover">
                           <thead>
                              <tr>
                                 <th>Project</th>
                                 <th>Activity</th>
                                 <th>Completion</th>
                                 <th>Take action</th>
                              </tr>
                           </thead>
                           <tbody>
                              <tr>
                                 <td>Bootstrap 5.x</td>
                                 <td>
                                    <span data-bar-color="danger" class="inlinesparkline">1,4,4,7,5,9,10</span>
                                 </td>
                                 <td>
                                    <div class="label label-danger">Canceled</div>
                                 </td>
                                 <td class="text-center">
                                    <div class="btn-group">
                                       <a href="table-extended.html#" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">
                                          <em class="fa fa-angle-down"></em>Action</a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="table-extended.html#">Cancel</a>
                                          </li>
                                          <li><a href="table-extended.html#">Delay</a>
                                          </li>
                                          <li><a href="table-extended.html#">Re Plan </a>
                                          </li>
                                          <li><a href="table-extended.html#">Invoke meeting</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>Web Engine</td>
                                 <td>
                                    <span data-bar-color="success" class="inlinesparkline">1,4,4,10,5,9,2</span>
                                 </td>
                                 <td>
                                    <div class="label label-success">Complete</div>
                                 </td>
                                 <td class="text-center">
                                    <div class="btn-group">
                                       <a href="table-extended.html#" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">
                                          <em class="fa fa-angle-down"></em>Action</a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="table-extended.html#">Cancel</a>
                                          </li>
                                          <li><a href="table-extended.html#">Delay</a>
                                          </li>
                                          <li><a href="table-extended.html#">Re Plan </a>
                                          </li>
                                          <li><a href="table-extended.html#">Invoke meeting</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>Nullam sit amet</td>
                                 <td>
                                    <span data-bar-color="warning" class="inlinesparkline">1,4,4,7,5,9,4</span>
                                 </td>
                                 <td>
                                    <div class="label label-warning">Delayed</div>
                                 </td>
                                 <td class="text-center">
                                    <div class="btn-group">
                                       <a href="table-extended.html#" data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">
                                          <em class="fa fa-angle-down"></em>Action</a>
                                       <ul class="dropdown-menu pull-right text-left">
                                          <li><a href="table-extended.html#">Cancel</a>
                                          </li>
                                          <li><a href="table-extended.html#">Delay</a>
                                          </li>
                                          <li><a href="table-extended.html#">Re Plan </a>
                                          </li>
                                          <li><a href="table-extended.html#">Invoke meeting</a>
                                          </li>
                                       </ul>
                                    </div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                     <!-- END table-responsive-->
                  </div>
                  <!-- END panel-->
               </div>
            </div>
            <!-- END row-->
         </div>
         <!-- END Page content-->
      </section>
      <!-- END Main section-->
   </div>
   <!-- END Main wrapper-->
   <!-- START Scripts-->
   <!-- Main vendor Scripts-->
   <script src="vendor/jquery/jquery.min.js"></script>
   <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
   <!-- Plugins-->
   <script src="vendor/chosen/chosen.jquery.min.js"></script>
   <script src="vendor/slider/js/bootstrap-slider.js"></script>
   <script src="vendor/filestyle/bootstrap-filestyle.min.js"></script>
   <!-- Animo-->
   <script src="vendor/animo/animo.min.js"></script>
   <!-- Sparklines-->
   <script src="vendor/sparklines/jquery.sparkline.min.js"></script>
   <!-- Slimscroll-->
   <script src="vendor/slimscroll/jquery.slimscroll.min.js"></script>
   <!-- Store + JSON-->
   <script src="vendor/store/store+json2.min.js"></script>
   <!-- ScreenFull-->
   <script src="vendor/screenfull/screenfull.min.js"></script>
   <!-- START Page Custom Script-->
   <!-- END Page Custom Script-->
   <!-- App Main-->
   <script src="app/js/app.js"></script>
   <!-- END Scripts-->
</body>

</html>